import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:xinxuan/common/appbar_util.dart';
import 'package:xinxuan/common/bar_util.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:xinxuan/common/scroll_configuration_common.dart';
import 'package:xinxuan/controllers/common_page_controller.dart';
import 'package:xinxuan/controllers/service_controller/service_page_controller.dart';
import 'package:xinxuan/router/app_routers.dart';
import 'package:x_common_utils/utils/inkWell_util.dart';
import 'package:get/get.dart';
import 'package:xinxuan/utils/color_util.dart';
import 'package:xinxuan/vo/articles_list_vo.dart';

class ServicePage extends StatelessWidget {

  final CommonPageController commonPageController = Get.find();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: pageBgColor,
      appBar: AppBarUtil(
        title: '客服',
        showLeading: false,
        backgroundColor: pageBgColor,
      ),
      body: Column(
        children: [
          Container(
            padding: EdgeInsets.symmetric(horizontal: 12.w),
            width: 375.w,
            color: bgWhiteColor,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                _serviceItem('assets/icons/icon_customer_service.png', '电话客服', () {
                  // launch('tel://020-2248109');
                  launch('tel://${commonPageController.versionData.value.customerService}');
                }),
                _serviceItem('assets/icons/icon_online_customer_service.png', '在线客服', () async {
                  commonPageController.openWeChatCustomerServiceChat();
                }),
                _serviceItem('assets/icons/icon_feedback.png', '反馈投诉', () {
                  Get.toNamed('${AppRouters.COMMON_PAGE}${AppRouters.FEEDBACK_PAGE}');
                }, showBorder: false),
              ],
            ),
          ),
          Container(
            height: 55.h,
            padding: EdgeInsets.symmetric(horizontal: 12.w),
            margin: EdgeInsets.only(top: 12.h),
            color: bgWhiteColor,
            child: Container(
              decoration: BoxDecoration(
                border: Border(
                  bottom: BorderSide(
                    width: .5,
                    color: lineColor
                  )
                )
              ),
              child: BarUtil(
                title: '常见问题',
                showLeftBar: false,
                padding: 4.w,
              ),
            ),
          ),
          Expanded(
            child: GetBuilder<ServicePageController>(
              init: ServicePageController(),
              builder: (controller) {
                return ScrollConfigurationCommon(child: ListView(
                  padding: EdgeInsets.only(bottom: 32.h),
                  children: controller.articleArr.asMap().keys.map((index) {
                    ArticlesItem item = controller.articleArr[index];
                    return InkWellUtil.shakeProofInkWell(Container(
                      padding: EdgeInsets.symmetric(horizontal: 12.w),
                      color: bgWhiteColor,
                      child: Row(
                        children: [
                          Expanded(child: Container(
                            padding: EdgeInsets.symmetric(horizontal: 4.w, vertical: 16.h),
                            decoration: BoxDecoration(
                              border: Border(
                                bottom: (index + 1) == controller.articleArr.length ? BorderSide.none : BorderSide(
                                  width: 1.w,
                                  color: lineColor1
                                )
                              )
                            ),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Expanded(child: Text(
                                  item.title ?? '',
                                  overflow: TextOverflow.ellipsis,
                                  maxLines: 2,
                                  style: TextStyle(
                                    color: textBlackColor,
                                    fontSize: 14.sp
                                  ),
                                )),
                                Image.asset(
                                  'assets/icons/icon_arrow_right.png',
                                  width: 14.w,
                                  height: 14.w,
                                )
                              ],
                          ))),
                        ],
                      ),
                    ), () {
                      Get.toNamed(
                        '${AppRouters.COMMON_PAGE}${AppRouters.ARTICLE_DETAIL_PAGE}',
                        arguments: {
                          'articleId': item.id,
                          'title': '${item.title}'
                        }
                      );
                    });
                  }).toList(),
                ));
              },
            ),
          )
        ],
      ),
    );
  }

  // /// 客服Item
  Widget _serviceItem(String iconPath, String title, GestureTapCallback onTap, {bool showBorder = true}) {
    return InkWellUtil.shakeProofInkWell(Container(
      height: 76.h,
      padding: EdgeInsets.symmetric(horizontal: 4.w),
      decoration: BoxDecoration(
        border: Border(
          bottom: showBorder ? BorderSide(
            color: lineColor,
            width: .5
          ) : BorderSide.none
        )
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(44.w),
                child: Image.asset(
                  iconPath,
                  width: 44.w,
                  height: 44.w,
                ),
              ),
              SizedBox(width: 12.w),
              Text(
                title,
                style: TextStyle(
                  color: textBlackColor,
                  fontSize: 16.sp,
                  fontWeight: FontWeight.bold
                ),
              )
            ],
          ),
          Image.asset(
            'assets/icons/icon_arrow_right.png',
            width: 14.w,
            height: 14.w,
          )
        ],
      ),
    ), () => onTap());
  }
}